/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

/*
  TODO(sorvell): include a reasonable set of default overlay opening
  animations. What's here right now is ad hoc.
*/

/*
  Styling a spark-overlay:

  1. use the 'opened' class to style the overlay when it is open.
  A transition or animation can be applied to animate the overlay into place.
  Note: there's no need to set the display property of an overlay. That's
  managed automatically.

  2. To apply a different animation when the overlay closes, use the
  'closing' class.
*/

@import url("../common/spark_widget.css");

:host {
  position: fixed;
  outline: none;
  display: none;
  opacity: 0;
  /* The no-op transform creates an independent stacking context for :host.
     See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
  */
  -webkit-transform: translateX(0);
}

/*
  The revealed class exists because it's necessary to 'show' a node
  before applying a transition. When an overlay is opened, it is
  immediately revealed (display: block) and then asynchronously the
  opened or closing classes are added.

  Because we don't want to actually show the node before a transition
  or animation is applied, when the node is
  revealed, it is made display: block but visibility: hidden.
  It is then made visibility: visible when it is opened.
*/

:host(.revealed) {
  display: block;
  visibility: hidden;
}

:host(.revealed.opened) {
  opacity: 1;
  display: block;
  visibility: visible;
}

:host(.revealed.closing) {
  display: block;
  visibility: visible;
}

/*
  When an animation is detected (via an animationstart event) this class
  is applied to remove any transition. This ensures only 1 animation end event
  will be processed.

  NOTE: if a rule such as a media query changes an overlay from using a css
  animation to a transition, the animation class must be altered or removed.
*/
:host(.animation-in-progress) {
  -webkit-transition: none;
  transition: none;
}

:host([animation=none]) {
  opacity: 0;
  /* This is essentially a no-op transition. We need it for the opening/closing
     sequences in .dart to function as designed.
  */
  -webkit-transition: all 0.001s;
  transition: all 0.001s;
}

:host([animation=none].opened) {
  opacity: 1;
}

:host([animation=fade]) {
  opacity: 0;
  -webkit-transition: all 0.218s;
  transition: all 0.218s;
}

:host([animation=fade].opened) {
  opacity: 1;
}

:host([animation=scale-slideup]) {
  opacity: 0.0;
  -webkit-transform: scale(1.05);
}

:host([animation=scale-slideup].opened) {
  opacity: 1.0;
  -webkit-transform: scale(1.0);
  -webkit-transition: all 0.218s;
  transition: all 0.218s;
}

:host([animation=scale-slideup].closing) {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

:host([animation=shake].opened) {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: shake-fade-in;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: shake-fade-in;
}

:host([animation=shake].closing) {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: shake-fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: shake-fade-out;
}

@-webkit-keyframes shake-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-50px);
  }
  30% {
    -webkit-transform: translateX(50px);
  }
  50% {
    -webkit-transform: translateX(-25px);
  }
  70% {
    -webkit-transform: translateX(25px);
  }
  90% {
    -webkit-transform: translateX(-13px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes shake-fade-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-50px);
  }
  30% {
    -webkit-transform: translateX(50px);
  }
  100% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
}

/* TODO(ussuri): Inconsistency here: overlay's bg & border colors are specified
   by the client, yet arrow's are hardcoded here. Could specify in the clien
   (e.g. spark-menu-button) using ::shadow -- easy for `fill`, but trickier for
   border-bottom-color.
*/
.arrow {
  position: relative;
  height: 1px;
  width: 0;
  margin-top: -17px;
  margin-bottom: 0;
  fill: #fafafa;
  border-color: transparent transparent #cfcfcf transparent;
  border-style: solid;
  border-width: 8px;
  cursor: pointer;
}

#arrowInner {
  fill: #fafafa;
  border-bottom-color: #fafafa;
  margin-top: -15px;
  top: 1px;
}

:host([arrow="top-center"]) .arrow {
  margin-left: auto;
  margin-right: auto;
}

:host([arrow="top-left"]) .arrow {
  left: 15px;
}

:host([arrow="top-right"]) .arrow {
  right: calc(-100% + 30px);
}
